JQuery - Kuchařka programátora

Úvod - Základy knihovny JQuery

Filozofie knihovny

  1. Hledání elementů - pomocí selektorů a manipulace s nimi
    jQuery('div').hide(); // skryje obsah všech div
    jQuery('div').text('Nový text'); // nahradí text uvnitř všech div
    jQuery('div').addClass('updateContent'); // přidá třídu updateContent
    jQuery('div').show(); // zobrazí obsah všech div
  2. Řetězená volání metod na skupině elementů
    jQuery('div').hide().text('Nový text').addClass('updateContent').show(); // Zřetězený zápis téhož. A navíc je rychlejší, protože elementy DOM vybírá jen jednou
  3. Používání obalu jQuery a implicitní iterace. Předchozí příklad se provede na všech div. Nemusíme psát žádné each().

Uspořádání rozhraní

  1. Jádro knihovny jQuery
  2. Selektory
  3. Atributy
  4. Procházení (traversing)
  5. Manipulace
  6. Kaskádové styly
  7. Události (Events)
  8. Efekty
  9. Ajax
  10. Pomocné funkce (Utility)
  11. Interní funkce

Spouštění jQuery - ready()

Kód jQuery se spouští až po načtení DOM. Netřeba tedy čekat na window.onload. To je zbytečně pozdě, protože se čeká na obrázky a tak.
jQuery(document).ready(function(){alert(jQuery('p').text())});
jQuery(function(){alert(jQuery('p').text())});
alert(jQuery('p').text()) // ale to musí být zapsáno až nakonec body (těsně břed značku < / body>). Je to i rychlejší než psát do Head, ale pak se špatně zjišťuje (čte) co se vlastně musí spustit při startu.

Výběr elementů pomocí selektorů

Pro vyhledáváné se používá selektorový subsystém Sizzle. Nemusíme vyhledávat v celém DOM, ale lze vyhledávat v určitém kontextu
jQuery('input',$('form') // anebo v kontextu toho, co jsme našli dřív s pomocí jQuery. Ekvivalent za $('form') je document.forms[0], nebo 'form'
Hledání v kontextu se dá krásně využít pokud chceme hledat ve vráceném dokumentu JSON/XML z AJAXu.

Filtrování a hledání Find(), Filter()

filter() - filtruje aktuální sadu elementů. Neboli zužuje již existující kontext.
find() - mění aktuální sadu elementů hledáním a to i v dceřiných elementech.
$('a').filter('external').length() // vybere všechny 'a' v DOM a v nich všechny co maj class 'external'. Pak se spočte počet.
$('a').filter(function(index){ return $(this).hasClass('external');}).length(); // zde jsme metodě filter předali anonymní funkci, která udělá výběr. $(this) zde odkazuje na každý element obalené skupiny. Vracená hodnota false odstraní element z obalené skupiny. Argument index sice nepoužíváme, ale určuje pořadí daného elementu z obalené skupiny.
Příklad na find()/filter(), kdy find() obarvuje dceřiné prvky a filter vybrané kontexové prvky najdeš na example-Find_Filter.html

Vrácení k předchozímu výběru před destruktivnímu změnou - end() a sloučení více výběrů andSelf()

end() vlastně vrací kontext o úroveň výš a bez toho aby se změny/výběr vůbec provedly - ony se nakonec provedou, ale nejsou viditelné v kontextu end(). Samotné end() verací prázdnou množinu.
andSelf() funguje podobně, kdy kontext dvou předchozích metod dá do jednoho kontextu. $('div').find('p').andSelf().xxx(), kde xxx je nějaká metoda co bude aplikována na všechny div a dceřinné p.

Traverzování

Každá traverzovací metoda (next,prev,parent, ...) může mít parametr :last,:first https://api.jquery.com/category/traversing

Vytváření, manuipulace, vkládání, odstraňování, nahrazování, klonování elementů

Užitečné odkazy